import React from 'react';
import {Link,withRouter} from 'react-router-dom';
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import * as userInfoActionsFormOtherFile from '../../actions/userinfo'
import InsetHeader from '../../components/insetHeader'
import CityList from "../../components/CityList"
import CurrentCity from "../../components/CurrentCity"
import LocalStore from '../../util/localStore'
// import {Redirect} from 'react-router'

class List extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let arr = [1, 2, 3];
    return (
      <div>
        <InsetHeader title="选择城市"/>
        <CurrentCity cityName={this.props.userinfo.cityName}/>

        <CityList changeFn={this.changeCity.bind(this)}/>
      </div>
    )
  }
  componentDidMount(){
    // console.log(this.props);
    // console.log(LocalStore)
  }
  changeCity(newCity){
    if(newCity == null){
      return
    }
    // console.log(newCity)
    //修改redux;
    const userinfo = this.props.userinfo;
    userinfo.cityName = newCity;
    // console.log(this.props.userInfoActions);
    this.props.userInfoActions.updateCityName(userinfo);

    //修改localStorage;
    LocalStore.setItem("CITYNAME",newCity);

    //跳转到首页
    // Redirect.push("/")
    // console.log(withRouter);
    //路由的跳转一共两种方式,官网介绍的看不懂,网上学到的,
    //第一种,用window自带的localtion.replace就可以
    // location.replace("#/");
    // 第二种,需要在routerMap最外层使用BrowerRouter,这样就可以在这里取到history了,类似RR2的版本了
    this.props.history.push("/")
    withRouter((history)=> history.push("/"));
// console.log(Redirect)
  }
}


function mapStateToProps(state) {
  return{
    userinfo:state.userinfo
  }
}
function mapDispatchToProps(dispatch) {
  return {
    userInfoActions:bindActionCreators(userInfoActionsFormOtherFile,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(List)

